<template>
  <a-layout>
    <a-layout-header style="background: #fff; padding: 0;">

      <div id="header">
        <div id="left">
          <menu-unfold-outlined
              id="left"
              v-if="collapsed"

              style="width: 50px;height: 30px"
              @click="() => (collapsed = !collapsed)"
          />
          <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)"  style="width: 50px;height: 30px" />
        </div>


        <div id="right">

          <user-outlined  style="margin-right: 10px"/>
          <a-button v-if="userInfo==null" type="link" @click="login">登录</a-button>
          <a-dropdown :trigger="['click']" v-if="!(userInfo==null)">
            <!--            <img :src="userInfo.userAvatar" />-->
            <a class="ant-dropdown-link" @click.prevent>
              用户
              <DownOutlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item><router-link to="/userInfo">我的信息</router-link></a-menu-item>
                <!--                <a-menu-item><router-link to="/editUserInfo">修改信息</router-link></a-menu-item>-->
                <a-menu-item><li type="link" @click="logout">退出</li></a-menu-item>

              </a-menu>
            </template>
          </a-dropdown>

        </div>
      </div>
    </a-layout-header>
    <a-layout>
      <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible width="180px"  style="width: 250px" theme="light" >
        <div class="logo" />
        <a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="inline" style="font-size: 14px;height: 40px " @click="toPage">
          <a-menu-item key="/index" >

            <user-outlined />
            <span>首页</span>
          </a-menu-item>


          <a-menu-item  key="/student/clazz" v-if="userInfo==='student'">
            <video-camera-outlined />
            <span>班级列表</span>
          </a-menu-item>

          <a-menu-item key="/student/course" v-if="userInfo==='student'">
            <upload-outlined />
            <span>课程信息</span>
          </a-menu-item>

          <a-menu-item key="/student/grades" v-if="userInfo==='student'">
            <user-outlined />
            <span>成绩信息</span>
          </a-menu-item>

          <a-menu-item key="/student/chooseCourse" v-if="userInfo === 'student'">
              <upload-outlined />
            <span>开始选课</span>
          </a-menu-item>


<!--          <a-menu-item key="/teacher/clazz" v-if="userInfo==='teacher'">-->
<!--            <upload-outlined />-->

<!--            <span>班级信息</span>-->
<!--          </a-menu-item>-->
          <a-menu-item key="/teacher/list" v-if="userInfo==='teacher'">
            <user-outlined />

            <span>老师列表</span>
          </a-menu-item>
          <a-menu-item key="/teacher/grades" v-if="userInfo==='teacher'">
              <upload-outlined />

            <span>成绩录入</span>
          </a-menu-item>
          <a-menu-item key="/teacher/condition" v-if="userInfo==='teacher'">
            <user-outlined />

            <span>课程情况</span>
          </a-menu-item>
          <a-menu-item key="/teacher/schedule" v-if="userInfo==='teacher'">
            <upload-outlined />

            <span>课表信息</span>
          </a-menu-item>





          <a-menu-item key="/admin/student" v-if="userInfo==='admin'">
            <user-outlined />

            <span>学生管理</span>
          </a-menu-item>
          <a-menu-item key="/admin/clazz" v-if="userInfo==='admin'">
              <upload-outlined />

            <span>班级管理</span>
          </a-menu-item>
          <a-menu-item key="/admin/teacher" v-if="userInfo==='admin'">
              <upload-outlined />

            <span>老师管理</span>
          </a-menu-item>
<!--          <a-menu-item key="/admin/course" v-if="userInfo==='admin'">-->
<!--            <user-outlined />-->

<!--            <span>课程管理</span>-->
<!--          </a-menu-item>-->
            <a-sub-menu key="sub1" v-if="userInfo==='admin'">
                <template #title>
              <span>
                <user-outlined />
                课程管理
              </span>
                </template>
                          <a-menu-item key="/admin/course" >
                            <user-outlined />
                            <span>课程管理</span>
                          </a-menu-item>
                <a-menu-item key="/admin/courseTable" >
                    <upload-outlined />
                    <span>课程表管理</span>
                </a-menu-item>

            </a-sub-menu>

<!--          <a-menu-item key="/analysis" v-if="userInfo?.userRole==='admin'">-->
<!--            <upload-outlined />-->
<!--            <span>接口统计分析</span>-->
<!--          </a-menu-item>-->
        </a-menu>
      </a-layout-sider>
      <a-layout-content
          :style="{ margin: '11px 11px', padding: '12px', background: '#fff', minHeight: '280px'}"
      >
        <router-view />
      </a-layout-content>

    </a-layout>


    <a-layout>


    </a-layout>
  </a-layout>

</template>



<script setup lang="ts">
import { DownOutlined } from '@ant-design/icons-vue';
import {defineComponent, onMounted, reactive} from 'vue';
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons-vue';
import {computed, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import { AppleOutlined, AndroidOutlined } from '@ant-design/icons-vue';
import myAxios from "../plugins/myAxios";
import {message} from "ant-design-vue";
import defaultResult from "ant-design-vue/es/_util/isMobile";
import _default from "ant-design-vue/es/vc-slick/inner-slider";
import Clazz from "../pages/student/Clazz.vue";




const route = useRoute();
const router = useRouter();

// const selectedKeys = computed(() => {
//   return [route.path];
// })

const toPage = ({key}: { key: string }) => {
  router.push({
    path: key
  })
}


const selectedKeys = ref<string[]>(['index'])

const collapsed=ref<boolean>(false)

const visible =ref(false)
const login = ()=>{
// router.push("/login")
  visible.value=true

}

const handleOk = ()=>{

}



const activeKey= ref('1')
// const onChange = (val:any)=>{
//   // alert(val)
//   if (val===1){
//     activeKey.value='2'
//   }else {
//     activeKey.value='1'
//   }
//   console.log(activeKey.value)
// }







interface FormState {
  userAccount: string;
  userPassword: string;
  remember: boolean;
}
const formState = reactive<FormState>({

  userAccount: '',
  userPassword: '',
  remember: true,
});

interface FormStatePhone {
  phone: string;
  code: string;
  remember: boolean;
}
const phoneDate = reactive<FormStatePhone>({

  phone: '',
  code: '',
  remember: true,
});


interface FormStateEnroll {
  userAccount: string;
  userPassword: string;
  checkPassword: string;
}
const enroll = reactive<FormStateEnroll>({

  userAccount: '',
  userPassword: '',
  checkPassword: '',
});

const userInfo = ref()


//获取用户信息
const getUser = async () => {
  const user = await myAxios.get("/user/get/permissions")
  if (user.data){
    userInfo.value =user.data
  }else {
    await router.push({path: '/'})
  }
}


onMounted(()=>{
  getUser()
})


const logout = async () => {
  const res = await myAxios.get("/user/logout")
  if (res.data){
    message.success("退出成功")
    await router.push({path: '/'})
  }else {
    message.error(res.message)
  }
}
</script>

<style scoped>



.example-showcase  {
  cursor: pointer;
  /*color: var(--el-color-primary);*/
  display: flex;
  align-items: center;
}
.el-dropdown-link{
  margin-right: 20px;
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
#header {
  display: flex;
  height: 70px;
  /*margin: 0;*/
  padding: 0;
}
#left {
  width: 80%;
  /*height: 25px;*/
  /*background-color: darksalmon;*/
  justify-content: flex-start;
  display: flex;
  align-items: center;
  margin-left: 16px;
}

#right {
  flex: 1;
  width: 20%;
  /*background-color: coral;*/
  /*height: 50px;*/
  justify-content: flex-end;
  display: flex;
  align-items: center;
  margin-right: 30px;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;

}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;

}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}
</style>
